<template>
	<div>
		<div class="i_index_title">
			<span class="index_title">支付完成</span>
			<van-icon class="fanhui" @click="fanhui" name="arrow-left" />
		</div>
		<div class="banner">
			<div class="duihao">
				<img src="@/assets/shouye/wc.png" alt="">
			</div>
			<p class="zhifu_zi">支付成功</p>
			<p class="zhushi">纸质彩票是兑换的唯一凭证，请妥善保管。</p>
			<div class="dd_list">
				<ul class="oul">
					<li class="oli">
						<span class="oli_title">订单编号:</span>
						<span class="oli_value">{{list.orderCode}}</span>
					</li>
					<li class="oli">
						<span class="oli_title">彩种:</span>
						<span class="oli_value">{{list.ticketName}}</span>
					</li>
					<li class="oli">
						<span class="oli_title">注数:</span>
						<span class="oli_value">{{list.ticketCount}}</span>
					</li>
					<li class="oli">
						<span class="oli_title">倍数:</span>
						<span class="oli_value">{{list.oneTicketBuyCount}}</span>
					</li>
					<li class="oli">
						<span class="oli_title">金额:</span>
						<span class="oli_value">￥{{list.ticketNumber}}</span>
					</li>
				</ul>
			</div>
		</div>
		<div class="bntn">
			<div class="fanhui1" @click="shouye">
				<span>返回首页</span>
			</div>
			<div class="xiangq" @click="xiangqing">
				<span>订单详情</span>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return {
				list:[]
			}
		},
		mounted() {
			this.list=this.$route.query
		},
		methods:{
			fanhui(){
				this.$router.go(-2);
			},
			shouye(){
				this.$router.push('/index')
			},
			xiangqing(){
				this.$router.push('/record')
			}
		}
	}
</script>

<style scoped>
	.i_index_title{
		width: 100%;
		height: 50px;
		background-color: #F74A4B;
		position: relative;
	}
	.fanhui{
		position: absolute;
		top: 50%;
		transform: translate(0,-50%);
		font-size: 30px;
		color: white;
	}
	.index_title{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		color: white;
	}
	.banner{
		width: 100%;
		height: 200px;
		background-color: #F74A4B;
		text-align: center;
		position: relative;
	}
	.duihao{
		margin:0 auto;
		width: 70px;
		height: 70px;
		padding-top: 20px;
	}
	.duihao>img{
		width: 100%;
		height: 100%;
	}
	.zhifu_zi{
		margin-top: 20px;
		font-size: 20px;
		color: white;
	}
	.zhushi{
		font-size: 13px;
		color: white;
	}
	.dd_list{
		width: 300px;
		height: 200px;
		background-color: white;
		position: absolute;
		bottom: -180px;
		left: 50%;
		transform: translate(-50%,0);
		box-shadow: 0px 1px 10px #6b6b6b;
	}
	.oul{
		width: 95%;
		margin: 20px auto;
		font-size: 14px;
	}
	.oli{
		height: 30px;
		/* border: 1px solid red; */
		position: relative;
	}
	.oli_title{
		position: absolute;
		left: 0;
		top: 50%;
		transform: translate(0,-50%);
	}
	.oli_value{
		position: absolute;
		right: 0;
		top: 50%;
		transform: translate(0,-50%);
	}
	.bntn{
		margin-top: 200px;
		width: 100%;
		display: flex;
		height: 30px;
		/* border: 1px solid red; */
	}
	.fanhui1{
		flex: 1;
		border: 1px solid #F74A4B;
		border-radius: 30px;
		margin-left: 20px;
		margin-right: 20px;
		text-align: center;
		line-height: 30px;
		background-color: white;
		color: #F74A4B;
	}
	.xiangq{
		flex: 1;
		background-color: #F74A4B;
		border-radius: 30px;
		margin-left: 20px;
		margin-right: 20px;
		text-align: center;
		line-height: 30px;
		color: white;
	}
</style>
